<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/top.css">
    <link rel="stylesheet" href="css/foot.css">
    <link rel="stylesheet" href="css/yxMobileSlider.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <link rel="stylesheet" href="css/flow.css">
    <title>购物车</title>
</head>

<body>
    <div class="top">
        <div class="top_left"><a class="sb-back" href="javascript:history.back(-1)" title="返回"><img src="images/icon_back.png" alt=""></a></div>
        购物车
    </div>
    <script>
        $(function() {
            //开始初始化
            //计算项
            var myLenght = $('.on').length;

            $('.xiang span').html(myLenght);


            $('.flow_goods li').click(function() {

                $(this).find('.Choice').toggleClass('on');

                //计算项
                var myLenght = $('.on').length;

                $('.xiang span').html(myLenght);
                count();

            })
            
            $('.removegoods').click(function(){
                
                
                $(this).parents('.goods_right2').parent().remove();
                
                //计算项
                var myLenght = $('.on').length;

                $('.xiang').html(myLenght);
                count();
                
                return false;
            })
        })

    </script>



    <div class="flow_goods">
        <ul>
            <li>
                <div class="Choice off"></div>
                <div class="goods_img"><img src="images/gwc_img_01.png" alt=""></div>
                <div class="goods_right2">
                    <div class="num_jj">
                        <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                        <input type="number" name="num" class="num_v" value="1">
                        <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                    </div>
                    <div class="removegoods"></div>
                </div>
                <div class="goods_right1">
                    <p class="goods_name">黑森林蛋糕</p>
                    <p class="price">58</p>
                    <p class="Pcun">3寸（合适1~2人）</p>
                </div>

            </li>

            <li>
                <div class="Choice off"></div>
                <div class="goods_img"><img src="images/gwc_img_02.png" alt=""></div>
                <div class="goods_right2">
                    <div class="num_jj">
                        <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                        <input type="number" name="num" class="num_v" value="1">
                        <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                    </div>
                    <div class="removegoods"></div>
                </div>
                <div class="goods_right1">
                    <p class="goods_name">黑森林蛋糕</p>
                    <p class="price">58</p>
                    <p class="Pcun">3寸（合适1~2人）</p>
                </div>

            </li>

            <li>
                <div class="Choice off"></div>
                <div class="goods_img"><img src="images/gwc_img_03.png" alt=""></div>
                <div class="goods_right2">
                    <div class="num_jj">
                        <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                        <input type="number" name="num" class="num_v" value="1">
                        <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                    </div>
                    <div class="removegoods"></div>
                </div>
                <div class="goods_right1">
                    <p class="goods_name">黑森林蛋糕</p>
                    <p class="price">58</p>
                    <p class="Pcun">3寸（合适1~2人）</p>
                </div>

            </li>


            <li>
                <div class="Choice off"></div>
                <div class="goods_img"><img src="images/gwc_img_04.png" alt=""></div>
                <div class="goods_right2">
                    <div class="num_jj">
                        <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                        <input type="number" name="num" class="num_v" value="1">
                        <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                    </div>
                    <div class="removegoods"></div>
                </div>
                <div class="goods_right1">
                    <p class="goods_name">黑森林蛋糕</p>
                    <p class="price">58</p>
                    <p class="Pcun">3寸（合适1~2人）</p>
                </div>

            </li>


            <li>
                <div class="Choice off"></div>
                <div class="goods_img"><img src="images/gwc_img_05.png" alt=""></div>
                <div class="goods_right2">
                    <div class="num_jj">
                        <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                        <input type="number" name="num" class="num_v" value="1">
                        <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                    </div>
                    <div class="removegoods"></div>
                </div>
                <div class="goods_right1">
                    <p class="goods_name">黑森林蛋糕</p>
                    <p class="price">58</p>
                   <p class="Pcun">3寸（合适1~2人）</p>
                </div>

            </li>


            <li>
                <div class="Choice off"></div>
                <div class="goods_img"><img src="images/gwc_img_06.png" alt=""></div>
                <div class="goods_right2">
                    <div class="num_jj">
                        <img class="num_img1" src="images/spmx_hover_icon_jian.png" alt="">
                        <input type="number" name="num" class="num_v" value="1">
                        <img class="num_img2" src="images/spmx_hover_icon_jia.png" alt="">
                    </div>
                    <div class="removegoods"></div>
                </div>
                <div class="goods_right1">
                    <p class="goods_name">黑森林蛋糕</p>
                    <p class="price">58</p>
                    <p class="Pcun">3寸（合适1~2人）</p>
                </div>

            </li>


        </ul>
    </div>




    <div class="xiang">已选择：<span>2</span>项</div>
    <div class="heji">合计：<span>￥</span><span class="myM">0</span>
    </div>

    <div class="info_addflow">
        <a href="user_order_make.html">立即结算</a>
    </div>


    <script type="text/javascript">

        $(".num_v").blur(function() {
            var num = $(".num_v").val();
            if (!$.isNumeric(num)) {
                $(".num_v").val(1);
            }
        });

        $(function() {
            $(".num_img1").click(function() {
                var num = Number($(this).parents('.num_jj').find('.num_v').val());
                num = num - 1;
                if (num <= 0) {
                    num = 1;
                }
                $(this).parents('.num_jj').find('.num_v').val(num);
                count();
                return false;
            });
        });
        $(function() {
            $(".num_img2").click(function() {
                var num = Number($(this).parents('.num_jj').find('.num_v').val());
                num = num + 1;

                $(this).parents('.num_jj').find('.num_v').val(num);

                count();

                return false;
            });

        });

        //统计咯
        function count() {
            var Choice = $('.Choice');
            var sumPrice = 0 ;
            for (i = 0; i < Choice.length; i++) {
                if(Choice.eq(i).hasClass('on')){
                    var num = Choice.eq(i).parent().find('.num_v').val();
                    var price = parseFloat(Choice.eq(i).parent().find('.price').html());
                    sumPrice += num*price;
                    
                }
                
                
            }
            
            $('.myM').html(sumPrice);
        }

    </script>
    <div class="foot">
        <ul>
            <li>
                <div class="img"><a href="index.html"><img src="images/index_botmenu01off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="flow.html"><img src="images/index_botmenu02off.png" alt=""></a></div>
            </li>
            <li>
                <div class="img"><a href="user_order_list.html"><img src="images/index_botmenu03off.png" alt=""></a></div>
            </li>
        </ul>
    </div>
</body>

</html>
